// import { ajax_tool } from "./ajax.js";
import { chooseList, report, chooseday, book } from "./request.js";

let record = document.querySelector('.record')
let date = document.querySelector('.date');
let triangle = document.querySelector('.triangle');
let time = document.querySelector('.time')
let box = document.querySelector('.box')
let choose = document.querySelectorAll('#choose')
let index = 0;
let con = document.querySelector('.con')
let top = document.querySelector('.top')
let timeBox = document.querySelector('.timebox');
let pop = document.querySelector('.pop');

async function getData() {
    // let url = 'http://newshopapi.0melon0.cn/api/f_user/chooselist'
    let data = {
        token: sessionStorage.getItem("token")
    }
    let res = await chooseList(data);
    console.log(res);

    if (res.msg == "操作成功") {
        date.innerHTML += `${res.result.list[0].day_time}`;
        // res.result.list.forEach(function (ele, index) {

        // });
    }
    // 日期修改功能
    res.result.list.forEach(function (ele) {
        box.innerHTML +=
            `
            <div class="datetime">
            <div class="time">${ele.day_time}</div>
            <div><input type="radio" name="1" id="choose"></div>
        </div>
        `
    })
    let datetimes = document.querySelectorAll('.datetime');
    // console.log(datetimes);
    //黑色时间选择框
    datetimes.forEach(function (ele, index) {
        ele.addEventListener('click', function () {
            if (choose = 'checked') {
                date.innerHTML = `${res.result.list[index].day_time}`;
                box.style.display = 'none';
                con.innerHTML = "";
                subscribe();
            }

        })
    })
    top.addEventListener('click', function () {
        // console.log(11);
        box.style.display = 'block'
    })
    //过期预约功能
    async function subscribe() {
        let data3 = {
            token: sessionStorage.getItem("token")
        }
        data3.day_time = date.innerHTML;
        // console.log(data3);
        // let url3 = 'http://newshopapi.0melon0.cn/api/f_user/chooseday';
        let res3 = await chooseday(data3);
        // console.log(res3);
        // let res1 = await ajax_tool("GET", url, data)
        let data1 = {};
        data1.phone = sessionStorage.getItem("phone");
        data1.name = sessionStorage.getItem("name");
        // console.log(data1);
        // let url1 = 'http://newshopapi.0melon0.cn/api/f_user/report';
        let res1 = await report(data1)

        let now = new Date().getTime();
        con.innerHTML = "";
        //三个时间段处理
        res3.result.list.forEach(function (ele) {
            // console.log(ele);
            let select = ele.day_time + " " + ele.show_name.split('-')[0] + ":00";
            select = new Date(select).getTime();
            // console.log(select, now);
            if (select > now) {
                let str = '<button>可预约</button>';
                // let str1 = '<button>已预约</button>';
                res1.result.forEach(function (item) {
                    if (item.day_time == ele.day_time) {
                        str = '<button class="book" disabled="disabled">已约满</button>'
                    }
                })
                con.innerHTML += `
                <div show_id="${ele.show_id}">
                <span>${ele.show_name}</span> 
                 ${str}
                </div>
                `
            } else {
                con.innerHTML += `
            <div class="con" show_id="${ele.show_id}">
            <span>${ele.show_name}</span> 
            <span class="error">已结束</span>
         </div>`
            }
        })
        // console.log(res3);

        //将时间相关信息渲染到弹窗
        let cbtn = con.querySelectorAll('button')
        cbtn.forEach(function (ele, index) {
            // console.log(ele);
            ele.addEventListener('click', function () {
                pop.style.display = 'block'
                pop.innerHTML += ""
                pop.innerHTML = `
                <h3>提示</h3>
                <div class="news">请确认预约信息</div>
                <div class="pop_data">日期:${date.innerHTML}</div>
                <div class="pop_data">时间:${ele.previousElementSibling.innerHTML}</div>
                <button class="cancel">取消预约</button>
                <button class="confirm">确认预约</button>
                `;

                let confirm = document.querySelector('.confirm');
                confirm.addEventListener('click', function () {
                    //渲染到截图页面
                    sessionStorage.setItem("show_id", res3.result.list[index].show_id);
                    sessionStorage.setItem("day_time", res3.result.list[index].day_time);
                    sessionStorage.setItem("show_name", res3.result.list[index].show_name);
                    Session();
                })

                let cancel = document.querySelector('.cancel');
                cancel.addEventListener('click', function () {
                    pop.style.display = 'none'
                })
            })


        })


    }
    //信息渲染到截图页面
    async function Session() {
        // let url = "http://newshopapi.0melon0.cn/api/f_user/bookday";
        let data = {
            token: sessionStorage.getItem("token"),
            day_time: sessionStorage.getItem("day_time"),
            show_id: sessionStorage.getItem("show_id"),
        };
        let res4 = await book(data)
        sessionStorage.setItem("id", res4.result.id);
        sessionStorage.setItem('name', res4.result.name)
        console.log(res4);
        console.log("预约成功");
        window.location.href = '../notice.html';
        console.log(res);
    }

    subscribe();
}





getData();

let token = sessionStorage.getItem("token")
// console.log(token);}